<template>
	<div class="channel_item">
		<h1 class="channel_item_title">
			<i></i><span>{{channelTitle}}</span>
		</h1>
		<div class="channel_item_content">
			<Newslist :news="newsId" v-if="type === 'news'" :newsListAd="newsListAd" :channelTitle="channelTitle" :channelId="channelId" :channelNewsCount="channelNewsCount" />
			<Comment :newsId="newsId" :newsTitle="newsTitle" :newsDate="newsDate" v-if="type === 'comment'" />
		</div>
	</div>
</template>

<script>
	import Newslist from "../../components/news/news-list.vue";
	import Comment from "../../components/comment/comment.vue";
	export default {
		name:"ChannelItem",
		props:["newstype","channelTitle","channelId","type", "newsTitle", "newsDate", "newsId", "newsListAd", "channelNewsCount"],
		data: function(){
			return {
				news: []
			}
		},
		components:{
			Newslist,
			Comment
		},
		created: function(){
			this.$set(this, "news", this.newstype);
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.channel_item{
		background-color: #fff;
		margin-top:10/@base;
		h1{
			&.channel_item_title{
				color:#FF0000;
				padding:20/@base;
				border-bottom: 1/@base solid #ccc;
				line-height: 30/@base;
				i{
					width:5/@base;
					height:24/@base;
					background-color: #FF0000;
					display:inline-block;
					overflow: hidden;
					margin-right:10/@base;
					vertical-align: middle;
				}
				span{
					vertical-align: middle;
				}
				font-size:24/@base;
			}
		}
		div{
			&.channel_item_content{
				min-height: 100/@base;
			}
		}
	}
</style>
